
<template>
  <div class="labelManage">
    <div class="crumbs">
      <header class="crumbs_arr_box">
        <span>书签管理</span>
      </header>
    </div>
    <div class="card_table">
      <!-- 表格头部控件 -->
      <header>
        <span>
          <el-input
            v-model="table_config.name"
            size="small"
            clearable
            class="sel_inp"
            placeholder="请输入内容"
          >
            <template slot="prepend">书签名称</template>
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-select
            v-model="table_config.type"
            class="sel_head"
            size="small"
            @change="search"
            clearable
            placeholder="请选择分析类型"
          >
            <el-option
              v-for="item in com_list"
              :key="item.value"
              :label="item.txt"
              :value="item.value"
            ></el-option>
          </el-select>
        </span>
        <span>
          <el-button
            v-if="$currentRole>2"
            @click="com_add=true"
            type="primary"
            plain
            size="mini"
          >添加书签</el-button>
        </span>
      </header>
      <section>
        <el-table
          v-loading="table_loading"
          :size="table_size"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            :show-overflow-tooltip="_i.showOverflowTooltip"
            v-for="_i in columns"
            :key="_i.key"
            :prop="_i.key"
            :label="_i.name"
            :width="_i.width?_i.width:'auto'"
            :align="_i.center?'center':false"
            :min-width="_i.minWidth?_i.minWidth:'auto'"
          >
            <template slot-scope="scope">
              <!-- 操作 -->
              <template v-if="_i.key=='opeatior'">
                <el-button
                  plain
                  size="mini"
                  @click="activeForm = JSON.parse(JSON.stringify(scope.row));com_edit=true"
                  type="text"
                >
                  <i :style="{fontSize:'14px'}" class="el-icon-setting"></i>
                </el-button>
                <el-button @click="labelDel(scope.row.id)" plain size="mini" type="text">
                  <i :style="{fontSize:'14px'}" class="el-icon-delete bigIcon"></i>
                </el-button>
              </template>
              <!-- 书签 名称 -->
              <template v-else-if="_i.key=='name'">
                <el-button
                  @click="routerAnalysis(scope.row)"
                  plain
                  size="mini"
                  type="text"
                >{{scope.row.name}}</el-button>
              </template>
              <!-- 统计时段 -->
              <template v-else-if="_i.key=='queryJson'">{{timeShow(scope.row.queryJson)}}</template>
              <!-- 书签类型 -->
              <template v-else-if="_i.key=='type'">{{analysisType(scope.row.type)}}</template>
              <!-- 创建时间 -->
              <template v-else-if="_i.key=='createTime'">{{time_change(scope.row.createTime)}}</template>
              <template v-else>{{scope.row[_i.key]}}</template>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <!-- 分页控件 -->
      <footer>
        <el-pagination
          :current-page="table_config.currentPage"
          @size-change="handleSizeChange"
          @current-change="current_change"
          :page-sizes="[5, 10, 30, 50, 100]"
          :page-size="table_config.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total_page"
        ></el-pagination>
      </footer>
    </div>
    <!--	新建组件弹框	-->
    <el-dialog
      top="15vh"
      :modal-append-to-body="false"
      class="dialog_box"
      :visible.sync="com_add"
      width="40%"
      title="新建书签"
    >
      <div class="com-list">
        <div
          class="item"
          v-for="(item, index) in com_list"
          :key="index"
          @click="handleSelectCom(item)"
        >
          <div class="content">
            <div class="icon">
              <i :class="item.icon"></i>
            </div>
            <p>{{item.txt}}</p>
          </div>
        </div>
      </div>
    </el-dialog>
    <!--  书签编辑弹框 -->
    <el-dialog
      top="8vh"
      :modal-append-to-body="false"
      class="diglog_box"
      :visible.sync="com_edit"
      width="40%"
      title="编辑书签"
    >
      <div class="dialog">
        <div class="save_config">
          <div class="line">
            <div class="left">名称</div>
            <div class="right">
              <el-input v-model="activeForm.name" :size="size"></el-input>
            </div>
          </div>
          <div class="line">
            <div class="left">归属概览</div>
            <div class="right">
              <el-select
                class="el_input"
                v-model="activeForm.overviewIds"
                :size="size"
                multiple
                filterable
                allow-create
                placeholder="请选择"
              >
                <el-option-group label="公共概览">
                  <el-option
                    v-for="item in overViewListPublic"
                    :key="item.id"
                    :label="item.overviewName"
                    :value="item.id"
                  ></el-option>
                </el-option-group>
                <el-option-group label="个人概览">
                  <el-option
                    v-for="item in overviewListPrivate"
                    :key="item.id"
                    :label="item.overviewName"
                    :value="item.id"
                  ></el-option>
                </el-option-group>
              </el-select>
            </div>
          </div>
          <div class="line">
            <div class="left">图表类型</div>
            <div class="right">
              <span
                @click="activeForm.chartType=0;activeForm.windowSize=null"
                :class="activeForm.chartType===0?'type_ech active':'type_ech'"
              >
                <span class="txt">
                  <i class="el-icon-picture-outline"></i>
                  <br>线图
                </span>
                <span v-show="activeForm.chartType===0" class="iconCheck"></span>
                <i v-show="activeForm.chartType===0" class="el-icon-check"></i>
              </span>
              <span
                @click="activeForm.chartType=1;activeForm.windowSize=null"
                :class="activeForm.chartType===1?'type_ech active':'type_ech'"
              >
                <span class="txt">
                  <i class="el-icon-s-data"></i>
                  <br>柱图
                </span>
                <span v-show="activeForm.chartType===1" class="iconCheck"></span>
                <i v-show="activeForm.chartType===1" class="el-icon-check"></i>
              </span>
              <span
                @click="activeForm.chartType=2;activeForm.windowSize=null"
                :class="activeForm.chartType===2?'type_ech active':'type_ech'"
              >
                <span class="txt">
                  <i class="el-icon-date"></i>
                  <br>表格
                </span>
                <span v-show="activeForm.chartType===2" class="iconCheck"></span>
                <i v-show="activeForm.chartType===2" class="el-icon-check"></i>
              </span>
              <span
                @click="activeForm.chartType=4;activeForm.windowSize=null"
                :class="activeForm.chartType===4?'type_ech active':'type_ech'"
              >
                <span class="txt">
                  <i class="el-icon-pie-chart"></i>
                  <br>环形图
                </span>
                <span v-show="activeForm.chartType===4" class="iconCheck"></span>
                <i v-show="activeForm.chartType===4" class="el-icon-check"></i>
              </span>
              <span
                @click="activeForm.chartType=3;activeForm.windowSize=null"
                :class="activeForm.chartType===3?'type_ech active':'type_ech'"
              >
                <span class="txt">
                  <i class="el-icon-document-checked"></i>
                  <br>数值
                </span>
                <span v-show="activeForm.chartType===3" class="iconCheck"></span>
                <i v-show="activeForm.chartType===3" class="el-icon-check"></i>
              </span>
            </div>
          </div>
          <div class="line lineSize">
            <div class="left">窗口尺寸</div>
            <div class="right">
              <span
                v-if="activeForm.chartType==3"
                @click="activeForm.windowSize=0"
                :class="activeForm.windowSize==0?'type_ech type_ech_size active':'type_ech_size type_ech'"
              >
                <span class="txt txtSize">
                  <span class="size">
                    <div class="box boxs">
                      <span class="s activeSize"></span>
                      <span class="s"></span>
                    </div>
                    <div class="box">
                      <span class="s"></span>
                      <span class="s"></span>
                    </div>
                  </span>
                  小
                </span>
                <span v-show="activeForm.windowSize===0" class="iconCheck"></span>
                <i v-show="activeForm.windowSize===0" class="el-icon-check"></i>
              </span>

              <span
                @click="activeForm.windowSize=1"
                v-if="activeForm.chartType!=3&&activeForm.chartType!=4"
                :class="activeForm.windowSize==1?'type_ech type_ech_size active':'type_ech_size type_ech'"
              >
                <span class="txt txtSize">
                  <span class="size">
                    <div class="box boxm">
                      <span class="m activeSize"></span>
                      <span class="m"></span>
                    </div>
                  </span>
                  中
                </span>
                <span v-show="activeForm.windowSize===1" class="iconCheck"></span>
                <i v-show="activeForm.windowSize===1" class="el-icon-check"></i>
              </span>
              <span
                @click="activeForm.windowSize=2"
                v-if="activeForm.chartType!=3"
                :class="activeForm.windowSize==2?'type_ech type_ech_size active':'type_ech_size type_ech'"
              >
                <span class="txt txtSize">
                  <span class="size">
                    <div class="box boxb">
                      <span class="b activeSize"></span>
                    </div>
                  </span>
                  大
                </span>
                <span v-show="activeForm.windowSize===2" class="iconCheck"></span>
                <i v-show="activeForm.windowSize===2" class="el-icon-check"></i>
              </span>
            </div>
          </div>
          <div class="line">
            <div class="left">备注</div>
            <div class="right big">
              <el-input v-model="activeForm.remarks" type="textarea" :rows="4" :size="size"></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="diglog_foot">
        <el-button size="small" @click="com_edit = false">取 消</el-button>
        <el-button size="small" @click="activeFormSubmit" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "labelManage", // 书签管理
  watch: {},
  data() {
    return {
      columns: [
        {
          name: "ID",
          key: "id",
          width: "60",
          center: true,
          showOverflowTooltip: true
        },
        {
          name: "书签名称",
          key: "name",
          center: true,
          minWidth: "140",
          showOverflowTooltip: true
        },
        {
          name: "统计时段",
          key: "queryJson",
          center: true,
          width: "200",
          showOverflowTooltip: true
        },
        {
          name: "类型",
          key: "type",
          width: "140",
          center: true,
          showOverflowTooltip: true
        },
        // {
        //   name: "所属概览",
        //   key: "overviewIds",
        //   center: true,
        //   showOverflowTooltip: true
        // },
        {
          name: "备注",
          key: "remarks",
          minWidth: "200",
          showOverflowTooltip: true
        },
        {
          name: "创建时间",
          key: "createTime",
          center: true,
          width: "100",
          showOverflowTooltip: true
        },
        {
          name: "操作",
          key: "opeatior",
          center: true,
          width: "100"
        }
      ],
      activeForm: {}, // 当前编辑书签
      com_edit: false, // 编辑书签开关
      overViewListPublic: [], // 公共概览数组
      overviewListPrivate: [], // 私人概览数组
      com_add: false, // 新建标签dialog
      table_loading: false,
      total_page: 0, // 表格数据总量
      table_config: {
        // overviewGroupType: 1, // 我的书签
        type: null, // 书签所属分析类型
        name: null, // 书签名称
        currentPage: 1,
        pageSize: 10
      }, // 表格查询大对象
      tableData: [], //  表格数据
      table_size: "small" //  表格尺寸变量
    };
  },
  methods: {
    // 书签编辑保存函数
    async activeFormSubmit() {
      let res = await this.$analysisApi.dataCard.overviewComponentUpdate(
        this.activeForm
      );
      if (res && res.success) {
        this.com_edit = false;
        this.total_page = 0;
        this.table_config.currentPage = 1;
        this.query();
      }
    },
    // 获取跨度计算值
    unitArrGet() {
      let weekUnit = new Date().getDay(); // 计算周跨度
      weekUnit = weekUnit == 0 ? 6 : weekUnit - 1;
      let monthUnit = new Date().getDate() - 1; // 计算月跨度
      let lastdate = new Date(); // 获取上个月天数
      let lastYear = lastdate.getFullYear();
      let lastMonth = lastdate.getMonth() + 1;
      if (lastMonth == 1) {
        lastMonth = 12;
        lastYear--;
      }
      // 计算年跨度、
      let yearUnit =
        Math.ceil(
          (new Date() - new Date(new Date().getFullYear().toString())) /
            (24 * 60 * 60 * 1000)
        ) - 1;
      // 获取去年天数
      let lastYearDay = new Date().getFullYear() - 1;
      if (
        (lastYearDay % 4 == 0 && lastYearDay % 100 != 0) ||
        lastYearDay % 400 == 0
      ) {
        lastYearDay = 366;
      } else {
        lastYearDay = 365;
      }
      let lastMonthUnit = new Date(lastYear, lastMonth, 0).getDate() + 1;
      return {
        weekUnit,
        monthUnit,
        lastdate,
        lastYear,
        lastMonth,
        yearUnit,
        lastYearDay,
        lastMonthUnit
      };
    },
    // 动态时间存储字段回显处理
    timeHandle(str) {
      if (!str || str.split("_").length != 3) {
        return str;
      }
      let num = str.split("_")[1];
      let {
        weekUnit,
        monthUnit,
        lastdate,
        lastYear,
        lastMonth,
        yearUnit,
        lastYearDay,
        lastMonthUnit
      } = this.unitArrGet();
      if (num == 0) {
        return "今天";
      }
      if (num == 1) {
        return "昨天";
      }
      if (num == weekUnit) {
        return "本周一";
      }
      if (num == weekUnit + 6) {
        return "上周一";
      }
      if (num == weekUnit) {
        return "上周末";
      }
      if (num == monthUnit) {
        return "本月1号";
      }
      if (num == monthUnit + lastMonthUnit) {
        return "上个月1号";
      }
      if (num == monthUnit + 1) {
        return "上个月末";
      }
      if (num == yearUnit) {
        return "1月1号";
      }
      if (num == yearUnit + lastYearDay) {
        return "去年1月1号";
      }
      if (num == yearUnit + 1) {
        return "去年12月31日";
      }
      return "过去" + num + "天";
    },
    // 统计时段回显函数
    timeShow(queryJson) {
      let obj = JSON.parse(queryJson);
      // 漏斗分析
      if (obj.req) {
        if (obj.req.fromDate && !obj.req.timeRestrict) {
          return obj.req.fromDate + " 至 " + obj.req.toDate;
        } else if (obj.req.fromDate && obj.req.timeRestrict) {
          if (obj.req.timeRestrict.function == "dynamic_time") {
            let _str = this.timeHandle(obj.req.timeRestrict.params[0]);
            if (
              obj.req.timeRestrict.params[0] !== obj.req.timeRestrict.params[1]
            ) {
              _str += " 至 ";
              _str += this.timeHandle(obj.req.timeRestrict.params[1]);
            }
            return _str; // 动态时间
          } else {
            return obj.req.fromDate + " 至 " + obj.req.toDate; // 绝对时间
          }
        }
      }
      // 事件分析存储
      if (obj.searchTime) {
        if (
          obj.searchTime.timeRestrict &&
          obj.searchTime.timeRestrict.function == "dynamic_time"
        ) {
          let _str = this.timeHandle(obj.searchTime.timeRestrict.params[0]);
          if (
            obj.searchTime.timeRestrict.params[0] !==
            obj.searchTime.timeRestrict.params[1]
          ) {
            _str += " 至 ";
            _str += this.timeHandle(obj.searchTime.timeRestrict.params[1]);
          }
          return _str;
        } else {
          return obj.searchTime.startDate + " 至 " + obj.searchTime.endDate; // 绝对时间
        }
      }
      if (!obj.searchTime && obj.fromDate) {
        if (!obj.timeRestrict) {
          return obj.fromDate + " 至 " + obj.toDate;
        } else if (obj.fromDate && obj.timeRestrict) {
          if (obj.timeRestrict.function == "dynamic_time") {
            let _str = this.timeHandle(obj.timeRestrict.params[0]);
            if (
              obj.timeRestrict.params[0] !== obj.timeRestrict.params[1]
            ) {
              _str += " 至 ";
              _str += this.timeHandle(obj.timeRestrict.params[1]);
            }
            return _str; // 动态时间
          } else {
            return obj.fromDate + " 至 " + obj.toDate; // 绝对时间
          }
        }
      }
      return "解析异常！！！";
    },
    routerAnalysis(item) {
      let path = "/dataAnalysis/";
      let _arr = JSON.parse(JSON.stringify(this.com_list));
      _arr.map(_i => {
        if (_i.value == item.type) {
          path += _i.path;
          // 本地存储
          sessionStorage.setItem("labelItem", JSON.stringify(item));
          this.$router.push({ path: path, query: { labelId: item.id } }); // 路径传入书签Id
          return;
        }
      });
      if (path == "/dataAnalysis/") {
        this.$message({
          message: "暂无匹配路径（ type 参数缺失）",
          type: "warning"
        });
      }
    }, // 书签跳转分析页面
    async labelDel(id) {
      let res = await this.$analysisApi.dataCard.overviewComponentDelete({
        appId: this.appId,
        id
      });
      if (res && res.success) {
        this.total_page = 0;
        this.table_config.currentPage = 1;
        this.query();
      }
    }, // 书签删除功能
    // 查询函数
    search() {
      this.table_config.currentPage = 1;
      this.query();
    },
    // 分页数量改变函数
    handleSizeChange(page) {
      this.table_config.pageSize = page;
      this.table_config.currentPage = 1;
      this.query();
    },
    // 页码切换函数
    current_change(page) {
      this.table_config.currentPage = page;
      this.query();
    },
    // 数据请求函数
    async query() {
      this.table_loading = true;
      let obj = JSON.parse(JSON.stringify(this.table_config));
      obj.appId = this.appId;
      let res = await this.$analysisApi.dataCard.overviewComponentList(obj);
      this.table_loading = false;
      if (res && res.success) {
        this.total_page = res.value.total;
        this.table_config.currentPage = res.value.currentPage;
        this.table_config.pageSize = res.value.pageSize;
        this.tableData = res.value.list;
      } else {
        this.total_page = 0;
        this.table_config.currentPage = 1;
        this.table_config.pageSize = 10;
        this.tableData = [];
      }
    },
    // 时间戳转换函数
    time_change(time) {
      let date = new Date(time); //获取一个时间对象
      let year = date.getFullYear(); // 获取完整的年份(4位,1970)
      let mon = date.getMonth() + 1; // 获取月份(0-11,0代表1月,用的时候记得加上1)
      mon = mon < 10 ? "0" + mon : mon;
      let day = date.getDate(); // 获取日(1-31)
      day = day < 10 ? "0" + day : day;
      return year + " - " + mon + " - " + day;
    },
    // 选择组件分析
    handleSelectCom(item) {
      this.$router.push({
        path: `/dataAnalysis/${item.path}`
      });
    },
    // 书签类型显示
    analysisType(status) {
      let str = "未知";
      let _arr = JSON.parse(JSON.stringify(this.com_list));
      _arr.map(_i => {
        if (_i.value == status) {
          str = _i.txt;
        }
      });
      return str;
    },
    // 所属概览请求函数
    async overViewListQuery() {
      // 公共概览 查询
      let res = await this.$analysisApi.dataCard.overviewList({
        appId: this.appId,
        overviewGroupType: 0,
        currentPage: 1,
        pageSize: 100000
      });
      if (res && res.success) {
        this.overViewListPublic = res.value.list;
      }
      // 个人概览 查询
      let _res = await this.$analysisApi.dataCard.overviewList({
        appId: this.appId,
        overviewGroupType: 1,
        currentPage: 1,
        pageSize: 100000
      });
      if (_res && _res.success) {
        this.overviewListPrivate = _res.value.list;
      }
    }
  },
  created() {
    this.overViewListQuery();
    this.query();
  },
  components: {},
  computed: {
    // dialog: 组件分析list
    com_list() {
      let menuList = this.$store.state.dataAnalysis.data_analysis_menuList;
      let list = [];
      if (menuList) {
        menuList.map(item => {
          if (item.children && item.children.length > 0) {
            item.children.map(child => {
              if (child.txt !== "数据概览") {
                list.push(child);
              }
            });
          } else {
            if (item.txt !== "数据概览") {
              list.push(item);
            }
          }
        });
      }
      return list;
    },
    appId() {
      return this.$store.state.global.appId;
    }
  }
};
</script>
<style scoped lang="scss">
.diglog_box {
  .dialog {
    position: relative;
    .save_config {
      width: 100%;
      .line {
        width: 99%;
        margin: 0rem auto 0.1rem;
        display: flex;
        justify-content: space-between;
        .left {
          width: 20%;
          height: 100%;
          text-indent: 0.12rem;
          height: 0.8rem;
          letter-spacing: 2px;
          // font-size: 14px;
          font-size: 0.22rem;
          display: flex;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          align-items: center;
        }
        .right {
          height: 100%;
          width: 80%;
          min-height: 1rem;
          display: flex;
          align-items: center;
          .type_ech {
            cursor: pointer;
            min-width: 1rem;
            // height: 0.8rem;
            min-height: 0.8rem;
            padding: 0 0 2px 0;
            display: inline-block;
            margin: 0 0.2rem 0 0;
            // font-size: 10px;
            font-size: 0.1rem;
            text-align: center;
            border-radius: 4px;
            border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
            color: rgba($color: #8492a6, $alpha: 0.9);
            position: relative;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            .txt {
              width: 100%;
              i {
                font-size: 0.26rem;
              }
              .size {
                display: inline-block;
                width: 90%;
                .box {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-evenly;
                  padding: 0.05rem 0;
                  .s,
                  .m,
                  .b {
                    border-radius: 2px;
                    border: 1px solid rgba($color: #8492a6, $alpha: 0.3);
                  }
                  .s {
                    width: 44%;
                    height: 0.2rem;
                  }
                  .m {
                    width: 44%;
                    height: 0.48rem;
                  }
                  .b {
                    width: 90%;
                    height: 0.5rem;
                  }
                }
                .boxs {
                  height: 0.3rem;
                }
                .boxm {
                  height: 0.5rem;
                }
                .boxb {
                  height: 0.5rem;
                }
                .activeSize {
                  background: rgba($color: #8492a6, $alpha: 0.2);
                  border: 1px solid rgba($color: #8492a6, $alpha: 0);
                }
              }
            }
            .iconCheck {
              position: absolute;
              top: 0;
              right: 0;
              width: 0;
              height: 0;
              border-bottom: 26px solid transparent;
              border-right: 26px solid rgba($color: #01b27a, $alpha: 0.8);
            }
            .el-icon-check {
              position: absolute;
              top: 2px;
              right: 2px;
              color: white;
            }
          }
          .type_ech:hover {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }
          .active {
            border: 1px solid rgba($color: #01b27a, $alpha: 0.6);
            color: rgba($color: #01b27a, $alpha: 0.8);
          }
          .type_ech_size {
            margin-top: 0.2rem;
            width: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            padding-top: 0.02rem;
          }
        }
        .big {
          height: 2rem;
        }
      }
      .lineSize {
        margin: 0.2rem auto;
      }
      .el_input {
        width: 100%;
      }
    }
  }
}
.el-select {
  width: 100%;
}
* {
  box-sizing: border-box;
}
.com-list {
  .item {
    width: calc(100% / 3);
    display: inline-block;
    text-align: center;
    color: #5f6e82;
    border-radius: 3px;
    padding: 5px 10px;
    .content {
      cursor: pointer;
      padding: 10px 0;
      background: #f5f8fc;
      border: 1px solid #e9f0f7;
      &:hover {
        border-color: #2dca93;
        color: #2dca93;
      }
      .icon {
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        background: #fff;
        border-radius: 50%;
        font-size: 20px;
      }
    }
  }
}
.bigIcon {
  font-size: 0.3rem;
}
::v-deep .el-form-item__error {
  position: absolute;
  left: 71%;
  bottom: 0.3rem;
}
::v-deep .notxt {
  color: #99a9bf;
}
.labelManage::-webkit-scrollbar {
  display: none;
}
.labelManage {
  width: 98%;
  margin: 0 auto;
  height: 98.6%;
  overflow-y: scroll;
  .card_table {
    width: 99%;
    margin: 0px auto 10px;
    padding-bottom: 36px;
    position: relative;
    header {
      width: 99%;
      margin: 0 auto;
      box-sizing: border-box;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sel_head {
        width: 290px;
        margin-right: 6px;
        margin-left: 0;
      }
      .sel_inp {
        width: 380px;
        margin-right: 20px;
      }
    }
    footer {
      position: absolute;
      width: 97%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      bottom: 0;
      left: 1%;
    }
    section {
      width: 98%;
      // max-height: 66vh;
      overflow-y: scroll;
      margin: 6px auto;
    }
    section::-webkit-scrollbar {
      width: 0 !important;
    }
    section {
      -ms-overflow-style: none;
    }
    section {
      overflow: -moz-scrollbars-none;
    }
  }
}
</style>
